<template>
  <a-modal
    class="base-modal"
    v-bind="$attrs"
    :visible="visibleModal"
    :title="computedTitle"
    @cancel="cancelCallbackFn"
    @ok="okCallbackFn"
    :footer="null"
    :keyboard="false"
    :maskClosable="false"
    destroyOnClose
    centered
    :width="props.width"
  >
    <div v-if="props.propsTips" class="tips-box">
      <span>{{ props.propsTips }}</span>
    </div>
    <slot name="content" :data="currentData"></slot>

    <slot name="footer">
      <div class="hz-btn-group">
        <template v-if="!detialText">
          <a-button key="back" v-if="showCloseBtn" @click="cancelCallbackFn" style="margin-right: 12px">{{
            props.closeText
          }}</a-button>
          <a-button
            key="submit"
            v-if="showOkBtn"
            type="primary"
            @click="okCallbackFn(true)"
            :loading="$attrs.confirmLoading"
            >{{ props.okText }}
          </a-button>
        </template>

        <!-- <template v-if="detialText == '关闭'">
          <a-button key="submit" type="primary" @click="okCallbackFn(false)" :loading="loadingModal"
            >{{ detialText }}
          </a-button>
        </template> -->
      </div>
    </slot>
  </a-modal>
</template>

<script setup lang="ts">
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  showCloseBtn: {
    type: Boolean,
    default: true,
  },
  showOkBtn: {
    type: Boolean,
    default: true,
  },
  showDetilaBtn: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: '',
  },
  width: {
    type: String,
    default: '800px',
  },
  okText: {
    type: String,
    default: '确认',
  },
  closeText: {
    type: String,
    default: '取消',
  },
  detilaTitle: {
    type: String,
    default: '详情',
  },
  propsTips: {
    type: String,
    default: '',
  },
  onOk: {
    type: Function,
    default: () => {},
  },
  onCancel: {
    type: Function,
    default: () => {},
  },
});

const computedTitle = computed<string>(() => {
  return detialText.value ? props.detilaTitle : props.title;
});

const visibleModal = ref<boolean>(false);
const loadingModal = ref<boolean>(false);
const detialText = ref<string>('');

const emits = defineEmits(['emitCallbackFn', 'emitClose']);

const currentData = ref<any>(null);

// data 当前弹窗的数据
const showModal = (data?: any, text?: string) => {
  detialText.value = text || '';
  currentData.value = data;
  loadingModal.value = false;
  visibleModal.value = true;
};

const toggleLoading = () => {
  loadingModal.value = !loadingModal.value;
};

const hideModal = () => {
  currentData.value = null;
  visibleModal.value = false;
};

const okCallbackFn = (flag: boolean) => {
  if (!flag) {
    hideModal();
    return;
  }
  emits('emitCallbackFn', { propsData: currentData.value });
};

const cancelCallbackFn = () => {
  emits('emitClose');
  visibleModal.value = false;
};

defineExpose({
  showModal,
  hideModal,
  toggleLoading,
});
</script>

<style lang="less" scoped>
.hz-btn-group {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.tips-box {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-bottom: 20px;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.8);
  font-weight: 400;
}
</style>
